<div ng-controller="mapshowController">
    <!--<div id="container" style="width: 100%; height: 574px;"></div>-->
    <div id="allmap" style="width: 100%; height: 574px;"></div>
</div>

<link type="text/css" rel="stylesheet" href="css/map.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript">

    var interfaceAddress = getPort();//定义接口常量
    $(function () {
        //获取公司列表数据
        $.ajax({
            type: "post",
            url: interfaceAddress  + 'api/rest/firm/query/all/company/',
            dataType: "json",
            success: function (data) {
                var json = eval(data.data);//转换json数据格式
                var data_info=[];//定义经纬度数组
                var result = [];//定义含有经纬度的数组
                var tiao = [];
                //将含有经纬度的数据拿出并放入新建数组中
                for(var j=0; j<json.length; j++){
                    if(!isNaN(json[j].lat)){
                        data_info.push([json[j].lng ,json[j].lat] );
                        result.push(json[j]);
                        tiao.push(json[j].offline)
                    }
                }
                // 百度地图API功能


                var map = new BMap.Map("allmap");    // 创建Map实例
                map.centerAndZoom(new BMap.Point(121.50647, 31.245342), 10);  // 初始化地图,设置中心点坐标和地图级别
                map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

                var opts = {
                    width : 250,     // 信息窗口宽度
                    enableMessage:false//设置允许信息窗发送短息
                };

                for(var i=0;i<data_info.length;i++){

                    var pt = new BMap.Point(data_info[i][0],data_info[i][1]);  // 创建标注
                    var marker = new BMap.Marker(pt);  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中


                    addClickHandler(marker);
                    function addClickHandler(marker){

                        //判断是否有值
                        if(result[i].score == undefined){
                            result[i].score=0;
                        }
                        if(result[i].total == undefined){
                            result[i].total=0;
                        }
                        if(result[i].online == undefined){
                            result[i].online=0;
                        }
                        if(result[i].offline == undefined){
                            result[i].offline=0;
                        }
                        if(result[i].lowAlert == undefined){
                            result[i].lowAlert=0;
                        }
                        if(result[i].highAlert == undefined){
                            result[i].highAlert=0;
                        }
                        var content = "<div id='hehe'>" +
                                "<table>" +
                                "<tr>" +
                                "<td>企业名称：</td>"+
                                "<td></td>"+
                                "<td>" + result[i].name +" </td>"+
                                "</tr>"+
                                "<tr>" +
                                "<td>企业地址：</td>"+
                                "<td></td>"+
                                "<td>" + result[i].address + "</td>"+
                                "</tr>"+
                                "<tr>" +
                                "<td>健康值：</td>"+
                                "<td></td>"+
                                "<td>" + result[i].score + "</td>"+
                                "</tr>"+
                                "<tr class='other'>" +
                                "<td>设备数量：</td>"+
                                "<td></td>"+
                                "<td id='total'>" + result[i].total + "</td>"+
                                "</tr>"+
                                "<tr class='other'>" +
                                "<td><span>online:</span></td>"+
                                "<td id='on'><em></em></td>"+
                                "<td><span id='online'>" + result[i].online + "</span></td>"+
                                "</tr>"+
                                "<tr>" +
                                "<td><span>offline:</span></td>"+
                                "<td id='off'><em></em></td>"+
                                "<td><span id='offline'>" + result[i].offline + "</span></td>"+
                                "</tr>"+
                                "<tr class='other'>" +
                                "<td>报警数量：</td>"+
                                "<td></td>"+
                                "<td id='allAlert'>" + [result[i].lowAlert + result[i].highAlert] + "</td>"+
                                "</tr>"+
                                "<tr class='other'>" +
                                "<td><span>黄色报警:</span></td>"+
                                "<td id='yellow110'><em></em></td>"+
                                "<td><span id='lowAlert'>" + result[i].lowAlert + "</span></td>"+
                                "</tr>"+
                                "<tr>" +
                                "<td><span>红色报警:</span></td>"+
                                "<td id='red110'><em></em></td>"+
                                "<td><span id='highAlert'>" + result[i].highAlert + "</span></td>"+
                                "</tr>"+
                                "</table>"+
                                "</div>";
                        marker.addEventListener("mouseover",function(e){
                            openInfo(content,e)}
                        );
                    }

                    function openInfo(content,e){

                        var p = e.target;
                        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
                        map.openInfoWindow(infoWindow,point); //开启信息窗口
                        $("#yellow110 em").width($("#lowAlert").html()/$("#allAlert").html()*100 + '%');
                        $("#red110 em").width($("#highAlert").html()/$("#allAlert").html()*100 + '%');
                        $("#on em").width($("#online").html()/$("#total").html()*100 + '%');
                        $("#off em").width($("#offline").html()/$("#total").html()*100 + '%');
                    }

                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });



    });
</script>
